import React, { useState, useEffect, useContext } from "react";
import "../css/details.css";
import { useParams } from "react-router-dom";
import { AppState } from "../App";

const Details = () => {
  const App = useContext(AppState);
  const { id } = useParams();
  const [Data, setData] = useState(null);
  const [Voters, setVoters] = useState([]); 
  console.log("Received id:", id);
  useEffect(() => {
    if (App.Foundationcontract) {
      const getProposals = async () => {
        try {
          const Proposal = await App.Foundationcontract.requestions(id);
          console.log(Proposal.photo);
          setData(Proposal); 
          const voter = await App.Foundationcontract.getRequestVoters(id);
          console.log(voter);
          setVoters(voter);
        } catch (error) {
          console.log(error);
        }
      };
      getProposals();
    }
  }, [App.Foundationcontract, id]); 

  return (
    <div>
      <div className="headerContent"></div>
      {Data && (
        <div className="detailDiv">
          <div className="image-container">
            <h1>Peace&Love</h1>
            <img
              src={`https://blush-chemical-hedgehog-894.mypinata.cloud/ipfs/${Data.photo}`}
              alt="Donation Image"
            />
          </div>
          <div className="record">
            <div className="donation-info">
              <h2>投票记录</h2>
              <ul>
              {Voters.map((voter, index) => (
                  <li key={index}>{voter}</li>
                ))}
              </ul>
            </div>
            <div class="donate-btn">
              <button type="button" class="btn">
                立即投票
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Details;
